<template>
	<view class="login-all-wrap">

		<cu-custom :bgColor="theme" :isBack="true" textColor="#ffffff">
			<block slot="backText">返回</block>
			<block slot="content">联络员登录</block>
		</cu-custom>
		
		<!-- <image class="back-image" src="../../static/login_exit@2x.png" @click="back"></image> -->
		<view class="login-bg">
			<img src="../../static/images/hi_logo.png" alt="HI LOGO" class="login-images">
			<view class="login-font1">
				欢迎登录！
			</view>
			<view class="login-font2">
				诺 信 在 线 教 育 平 台
			</view>
		</view>
		<view class="login-content">

			<!-- <image class="back-image" src="../../static/login_exit@2x.png" @click="back"></image> -->
			
			<!-- <view class="top-wrap">
				<button class="pass-login-btn currentLogin">密码登录</button>
			</view> -->
			
			<!-- <view class="text-center" style="padding-bottom: 70rpx;font-size: 55rpx;"></view> -->

			<view class="px-2 login-input-wrap">
				<template>
					<view class="mb-2">
						<view class="input-name">
							手机号
						</view>
						<view class="login-view">
							<image class="search_home" src="../../static/login_phone.png"></image>
							<input type="number" confirm-type="search" placeholder="请输入手机号"
								placeholder-style="color:#D3D3D3;" v-model="username" />
						</view>
					</view>
					<view class="verify-code-wrap">
						<view class="input-name">
							密码
						</view>
						<view class="login-view">
							<image class="search_home" src="../../static/login_verify.png"></image>
							<input type="password" confirm-type="search" placeholder="请输入密码"
								placeholder-style="color:#D3D3D3;" v-model="password" />
						</view>
					</view>
				</template>
			</view>

			<view class="newstate marginl">
				<template v-if="agree == false">
					<image @click="agreeme" class="agree" src="../../static/check_nor.png" mode="aspectFit"></image>
				</template>
				<template v-else>
					<image @click="agreeme" class="agree" src="../../static/check_sel.png" mode="aspectFit"></image>
				</template>
				<view class="flex align-center  login-botttom-text font-sm">
					我已阅读并同意<text @click="gotoxieyi(0)" class="xieyi font-sm">《用户服务协议》</text>和<text @click="gotoxieyi(1)"
						class="xieyi font-sm">《隐私保护政策》</text>
				</view>
			</view>

			<view class="login-btn-wrap py-2 px-2">
				<button enabled="enabled" class="text-white"
					style="border-radius: 50rpx; border: 0; background: #3694EF;" type="primary"
					:class="{ opatity: enabled}" @click="submit">
					登录
				</button>
				<!-- <view @click="register" class="reg-btn">注册账号</view>
				<view @click="forgetPass" class="forget-pass">忘记密码</view>
				<view style="height: 30rpx;"></view> -->
			</view>

			<!-- <view class="flex align-center justify-center"></view> -->
		</view>
	</view>
</template>
<script>
	const app = getApp();
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				theme: '', //全局颜色变量
				// app.globalData.theme.backgroundColor
				username: "",
				password: "",
				agree: false, //是否同意协议
				phone: "",
			}
		},
		computed: {
			// 登录按钮 是否禁用
			enabled: function() {
				if (this.username.length >= 11 && this.password.length >= 6) {
					return false;
				}
				return true;
			},
		},
		methods: {
			// 是否同意协议
			agreeme() {
				if (this.agree == true) {
					this.agree = false;
				} else {
					this.agree = true;
				}
			},
			// 协议跳转
			gotoxieyi(item) {
				if (item == '1') {
					uni.navigateTo({
						url: '../login/xieyi?type=4',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				} else {
					uni.navigateTo({
						url: '../login/xieyi?type=5',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}

			},
			// 注册
			register() {
				uni.navigateTo({
					url: "../reg/reg_lly"
				})
			},
			// 忘记密码
			forgetPass() {
				uni.showModal({
					title: '咨询电话',
					content: '0315-6561162',
					showCancel: false,
					confirmText: '拨打电话',
					success: (res) => {
						if (res.confirm) {
							uni.makePhoneCall({
								phoneNumber: '0315-6561162', // 手机号
								success: (res) => {
									console.log('调用成功!')
								},
								fail: (res) => {
									console.log('调用失败!')
								}
							});

						}
					}
				})
			},
			// 隐藏登录页面
			back() {
				console.log(getCurrentPages())
				uni.navigateBack({
					delta: 1
				});
			},
			// 数据验证
			validate() {
				var mPattern = /^1[3456789][0-9]\d{8}$/;
				this.phone = this.username;
				if (!mPattern.test(this.phone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				//更多验证
				return true;
			},
			// 提交按钮
			submit() {
				// 表单验证
				if (!this.validate()) return;
				if (this.username.length == 0 || this.password.length == 0) {
					uni.showToast({
						title: '手机号或密码不能为空',
						icon: 'none'
					});
					return;
				}
				if (this.agree == false) {
					uni.showToast({
						title: '请阅读并同意相关协议',
						icon: 'none'
					});
					return;
				}
				//注册处理
				uni.request({
					url: app.globalData.serve_job_url + "loginLianluoyuan",
					data: {
						lianluoyuanPhonenum: this.username,
						lianluoyuanBiaoshi: this.password,
					},
					success: (res) => {
						if (res.data.code == 200) {
							uni.showToast({
								title: '登录成功！',
								icon: 'none'
							});
							let lianluoyuan = res.data.data;
							app.globalData.userinfo.llyId = lianluoyuan.lianluoyuanId;

							uni.setStorageSync(
								'userinfo',
								app.globalData.userinfo
							);

							setTimeout(function() {
								if (lianluoyuan.lianluoyuanState == 1) {
									uni.redirectTo({
										// url: '../my/my',
										url: '../../packageC/pages/news/newscopy',
									});
								} else if (lianluoyuan.lianluoyuanState == 0) {
									uni.showModal({
										title: '审批状态提示',
										content: '联络员状态审批中...',
										showCancel: false,
										confirmText: '关闭'
									})
								} else if (lianluoyuan.lianluoyuanState == 2) {
									uni.showModal({
										title: '状态停用提示',
										content: '联络员状态已停用',
										showCancel: false,
										confirmText: '关闭'
									})
								} else {
									uni.showModal({
										title: '系统提示',
										content: '系统错误，请稍后重试...',
										showCancel: false,
										confirmText: '关闭'
									})
								}
							}, 1000);
						} else {
							uni.showModal({
								title: '登录提示',
								content: '手机号或密码错误！',
								showCancel: false,
								confirmText: '关闭'
							})
							return;
						}
					}
				});
			}
		}
	}
</script>

<style>
	@import url("/static/css/search/search.css");

	page {
		position: relative;
		height: 100vh;
		overflow: hidden;
		background: radial-gradient(circle farthest-side at 0 0,rgb(54,147,240) 0%,rgb(255, 255, 255) 100%) no-repeat;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.login-all-wrap {
		height: 100%;
	}

	.login-bg {
		width: 100%;
		height: 30%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: 70rpx;
		color: #FFFFFF;
	}

	.login-images {
		margin-top: 50rpx;
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 10rpx;
	}

	.login-font1 {
		font-size: 40rpx;
		font-weight: 500;
		margin: 15rpx 0;
	}

	.login-font2 {
		font-size: 35rpx;
	}

	.login-content {
		width: 100%;
		height: 70%;
		background-color: #FFFFFF;
		border-top-left-radius: 2em;
		border-top-right-radius: 2em;
		padding-top: 100rpx;
	}

	.back-image {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 30rpx;
		top: 120rpx;
	}

	.reg-btn {
		position: absolute;
		left: 40rpx;
		margin-top: 30rpx;
		font-size: 26rpx;
		color: #45DCAC;
	}

	.login-botttom-text {
		color: #646464;
		margin-left: 10rpx;
		height: 40rpx;
		line-height: 40rpx;
		width: 100%;

	}

	.newstate {
		width: 100%;
		display: flex;
		flex-direction: row;
		margin-top: 15rpx;
		height: 40rpx;
		/* padding-left: 45rpx; */
	}

	.agree {
		width: 30rpx;
		height: 30rpx;
		margin-top: 5rpx;
		margin-left: 10rpx;
	}


	/*三方登录默认隐藏*/
	.loginThreeHide {
		display: none;
	}

	.loginThreeShow {
		display: inline-block;
	}

	.top-wrap button {
		display: inline-block;
		background-color: #FFFFFF;
		overflow: inherit;

	}

	button::after {
		border: none;
	}

	.pass-login-btn {
		/* #ifndef H5 */
		margin-top: 80rpx;
		/* #endif */
		font-size: 30rpx;
		color: #646464;
	}

	.currentLogin {
		font-weight: bold;
		font-size: 44rpx;
	}

	/* 输入框部分 */
	.login-input-wrap input {
		color: #000000;
	}

	.login-view {
		width: 100%;
		height: 55rpx;
		border-bottom: 1px solid #E8E8E8;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.login-view image {
		margin: 0;
		padding: 0;
		margin-left: 10rpx;
	}

	.login-view input {
		height: 100%;
		width: 100%;
		padding-left: 25rpx;
	}

	.marginl {
		margin-left: 45rpx;
	}

	.input-name {
		font-weight: bold;
		margin: 5rpx 0;
		font-size: 30rpx;
	}

	.verify-code-wrap {
		margin-top: 60rpx;
	}

	/*登录按钮部分*/
	.login-btn-wrap {
		margin-top: 60rpx;
		height: 90rpx;
	}

	.login-btn-wrap button {
		font-size: 30rpx;
		height: 100%;
		line-height: 90rpx;
	}

	/* 登录按钮 输入内容时,去掉灰色效果 */
	.login-btn {
		background: linear-gradient(to right, #7BD68E, #65CCB9);
	}

	.opatity {
		opacity: 0.5;
	}

	/* 登录图标 */
	.login-icon-all-wrap {
		margin-top: 320rpx;
	}

	.login-icon {
		color: #60E28B;
		display: inline-block;
		width: 88rpx;
		height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 80rpx;
	}

	.uni-tag-text--primary {
		margin: 0 60rpx;
	}

	.uni-tag-text--primary text {
		display: block;
	}

	.login-icon-text {
		color: #646464 !important;
	}

	.xieyi {
		color: #3694EF;
	}

	/* 忘记密码 */
	.forget-pass {
		font-size: 26rpx;
		color: #C9C9C9;
		text-align: right;
		margin-top: 30rpx;
	}

	.px-2 {
		padding: 0 45rpx;
	}
</style>